<template>
  <div class="radar-container" ref="radarRef"></div>
</template>

<script>
// import * as echarts from "echarts";
import * as echarts from "echarts/core"; // 引入主模块
import { RadarChart } from "echarts/charts"; // 引入雷达图
// 引入提示框和标题组件
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
// 引入canvas渲染器
import { CanvasRenderer } from "echarts/renderers";
// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  RadarChart,
  CanvasRenderer,
]);
export default {
  // 想操作真实DOM，必须等到虚拟DOM变成真实DOM之后，才可继续
  // 钩子 -> mounted(): 在这个时候、虚拟DOM已经变成了真实DOM
  mounted() {
    // 基于准备好的DOM，实例化charts对象
    const charts = echarts.init(this.$refs.radarRef);
    // 定义图形的配置
    const option = {
      title: {
        text: "基础雷达图",
      },
      tooltip: {},
      legend: {
        data: ["平均水平", "个人价值"],
        right: 0,
      },
      radar: {
        // shape: 'circle',
        name: {
          textStyle: {
            color: "#fff",
            backgroundColor: "#999",
            borderRadius: 3,
            padding: [3, 5],
          },
        },
        indicator: [
          { name: "工作效率", max: 100 },
          { name: "考勤", max: 100 },
          { name: "积极性", max: 100 },
          { name: "帮助同事", max: 100 },
          { name: "自主学习", max: 100 },
          { name: "正确率", max: 100 },
        ],
      },
      series: [
        {
          name: "平均 vs 个人",
          type: "radar",
          // areaStyle: {normal: {}},
          data: [
            {
              value: [80, 80, 80, 80, 80, 80],
              name: "平均水平",
            },
            {
              value: [90, 75, 95, 90, 95, 90],
              name: "个人价值",
            },
          ],
        },
      ],
    };
    // 把图形画出来
    charts.setOption(option);
  },
};
</script>

<style scoped>
.radar-container {
  width: 500px;
  height: 400px;
}
</style>
